<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>"一流攀大"年度综合考核测评系统</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/layui.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2696345_ubdu47c0yba.css">

    <style>
        .iconset {
            margin-right: 5px;
        }

        @media only screen and (max-width: 468px) {
            .layui-logo {
                text-align: left !important;
            }
        }

        a {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-layout-admin">
    <!--头部-->
    <div class="layui-header" style="background-color: #0062CC !important;">
        <div class="layui-logo" style="width: 500px;font-size: 22px"><img src="/static/images/logo.png" width="64" height="64" alt='"一流攀大"年度综合考核测评系统'/>"一流攀大"年度综合考核测评系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href=""><img src="/static/images/1.jpg" class="layui-nav-img" th:text="${name}"></a>
                <dl class="layui-nav-child">
                    <dd><a id="changePassword">修改密码</a></dd>
                    <dd><a href="/user/logout">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <image></image>
    <!--中间主体-->
    <div class="layui-body" id="container" style="left: 0">
        <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
            <ul class="layui-tab-title" disabled="disabled">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>

    <!--底部-->
    <div class="layui-footer" style="left: 0">
        <center>"一流攀大"年度综合考核测评系统</center>
    </div>
</div>
<form class="layui-form" style="display: none" id="commentForm" onsubmit="return false" lay-filter="pushForm">
    <div class="layui-form-item" style="width: 70%;margin-top: 20px">
        <label class="layui-form-label" style="width: 100px;margin-left: 30px">修改的密码：</label>
        <div class="layui-input-block"  style="margin-left:150px">
            <input class="layui-input" id="password" name="password" minlength="2" type="password" required=""
                   aria-required="true">
        </div>
    </div>
    <div class="layui-form-item" style="width: 70%;margin-top: 20px">
        <label class="layui-form-label" style="width: 100px;margin-left: 30px">请确定密码：</label>
        <div class="layui-input-block"  style="margin-left:150px">
            <input class="layui-input" id="password1" minlength="2" type="password" required=""
                   aria-required="true">
        </div>
    </div>
</form>
<script>
    layui.use(['element','form'], function () {
        var element = layui.element;
        var form = layui.form;
        // var layer = layui.layer;
        var $ = layui.$;
        $("#changePassword").on("click", function () {
            var addOpen = layer.open({
                //基本层类型
                type: 1,
                shadeClose: false,
                scrollbar: false,
                area: ['550px', '350px'],
                //标题
                title: '修改密码',
                //内容
                content: $('#commentForm'),
                //按钮
                btn: ['确定', '取消'],
                //确定按钮
                yes: () => {
                    if ($('#password').val() == $("#password1").val()) {
                        //开启loading
                        const loading = layer.load(2);
                        //获取表单内的所有值
                        var formObj = form.val('pushForm');
                        //发送数据到接口
                        $.ajax({
                            url: '/user/changePassword',
                            method: "post",
                            contentType: 'application/json;charset=utf-8',
                            data: JSON.stringify(formObj),
                            dataType: "json",
                            success: function (data) {
                                layer.close(loading);
                                if (data.data == 1) {
                                    layer.msg("修改成功");
                                    layer.close(addOpen)
                                } else {
                                    layer.alert(data.msg);
                                }
                            }
                        });
                    } else {
                        layer.msg("两次输入的密码不相同！")
                    }
                },
            });
        })
        // 配置tab实践在下面无法获取到菜单元素
        $('.subMenu').on('click', function () {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });

        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                //tabs:中间主体的fiter名
                element.tabAdd('tabs', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" frameborder="0" src="' + url +
                        '" style="width:100%;height:95%;"></iframe>',
                    id: id //规定好的id
                })
                FrameWH(); //计算ifram层的大小
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
                $.each($('iframe'), function (index, dom) {
                    dom.contentWindow.location.reload();
                })
            },
            tabDelete: function (id) {
                element.tabDelete("tabs", id); //删除
            }
        };

        function FrameWH() {
            var h = $(window).height();
            h -= 150;
            $("iframe").css("height", h + "px");
        }

        layer.ready(function () {
            active.tabAdd("userGrade", 1, "满意度调查")
            active.tabChange(1)
        })
    });
</script>
</body>
</html>